<template>
  <div class="net_work_box">
    <el-dialog
      @close="handleClose(false)"
      @open="handleOpen"
      close-on-press-escape
      v-dialogDrag
      title="重置密码"
      :close-on-click-modal="false"
      :lock-scroll="false"
      :visible="showDialog"
      width="650px"
    >
      <el-form
        label-position="right"
        :model="form"
        :rules="rules"
        ref="formRef"
        size="mini"
        class="demo-ruleForm"
        label-width="auto"
      >
        <el-row :gutter="16" type="flex">
          <el-col :span="24">
            <el-form-item label="手机号:" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="新密码:" prop="newPassword">
              <el-input
                type="password"
                :show-password="true"
                v-model="form.newPassword"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="handleClose(false)">取 消</el-button>
        <el-button
          size="mini"
          type="primary"
          @click="submitForm('formRef')"
          :loading="btnLoadin"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { editPaw } from "@/api/userAuth";
export default {
  props: {
    userId: {
      type: [String, Number],
      default: false
    },
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  components: {},
  computed: {
    user() {
      return this.$store.state.user.user;
    }
  },
  data() {
    return {
      rules: {
        newPassword: [{ required: true, message: "请输入新密码" }],
        phone: [
          { required: true, message: "请输入手机号" },
          {
            pattern: /^(?:(?:\+|00)86)?1\d{10}$/,
            message: "请输入正确的手机号格式"
          }
        ]
      },
      form: {
        newPassword: "",
        phone: ""
      },
      btnLoadin: false
    };
  },
  mounted() {},
  watch: {},
  methods: {
    //弹窗打开执行操作
    handleOpen() {
      this.$nextTick(() => {
        this.$refs["formRef"].resetFields();
      });
    },
    // 弹窗关闭执行操作
    handleClose(isRefresh) {
      // this.$nextTick(() => {
      this.$refs["formRef"].resetFields();
      // });
      this.$emit("update:showDialog", false);
      this.$emit("closeDialog", isRefresh);
    },
    handleeditPaw() {
      this.btnLoadin = true;
      return new Promise(async (resolve, reject) => {
        editPaw({
          ...this.form,
          userId: this.userId
        })
          .then(res => {
            this.btnLoadin = false;
            this.$msg({
              message: "修改成功!",
              type: "success"
            });
            // this.handleClose(true);
            this.$emit("update:showDialog", false);
            resolve();
          })
          .catch(err => {
            this.btnLoadin = false;
          });
      });
    },
    // 提交
    submitForm(formName) {
      console.log("this.user :>> ", this.user.userId);
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 如果是自己修改自己的话 重新登录
          if (this.user.userId == this.userId) {
            this.$confirm(
              "修改自己的密码成功后,需要重新登录,是否确认修改?",
              "提示",
              {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }
            )
              .then(async () => {
                this.btnLoadin = true;
                await this.handleeditPaw();
                await this.$store.dispatch("user/logout");
                this.$router.push("/login");
                this.btnLoadin = false;
              })
              .catch(r => {});
          } else {
            this.handleeditPaw();
          }
        } else {
          return false;
        }
      });

      // addUser
    }
  }
};
</script>

<style lang="scss" scoped>
.net_work_box {
  /deep/ .el-row--flex {
    flex-wrap: wrap;
  }
  /deep/ .el-form-item__label {
    white-space: nowrap;
  }
  /deep/ .el-tabs__nav-wrap {
    overflow: inherit;
  }
  /deep/ .custom-upload .el-button--primary {
    /* height: 104px; */
    /* width: ; */
  }
  /deep/ .el-tabs--left .el-tabs__nav-wrap.is-left::after,
  .el-tabs--left .el-tabs__nav-wrap.is-right::after,
  .el-tabs--right .el-tabs__nav-wrap.is-left::after,
  .el-tabs--right .el-tabs__nav-wrap.is-right::after {
    height: 300px;
  }
}
.ipAdress {
  background-color: #fff;
  background-image: none;
  border-radius: 2px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  /* height: 27px; */
  /* padding: 0 0.90909rem; */
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.isAdressFocus {
  border: 1px solid #409eff;
}
.ipAdress li {
  position: relative;
  height: 27px;
  margin: 0;
  list-style: none;
}

ul[class="ipAdress"] input[type="text"] {
  border: none;
  width: 100%;
  height: 26px;
  text-align: center;
  background: transparent;
  color: #606266;
  font-size: 12px;
}

.ipAdress li div {
  position: absolute;
  /* bottom: 2px; */
  right: 0;
  border-radius: 50%;
  background: #c0c4cc;
  width: 2px;
  height: 2px;
  top: 50%;
  margin-top: -1px;
}

/*只需要3个div*/
.ipAdress li:last-child div {
  display: none;
}

/*取消掉默认的input focus状态*/
.ipAdress input:focus {
  outline: none;
}

.addbutton {
  background-color: #2680d2;
  color: #ffffff;
  position: absolute;
  right: 0px;
  top: 0px;
}
.el-icon-plus {
  color: #ffffff;
}
.div-inline {
  display: inline;
  background-color: #e4e4e4;
  padding: 2px;
  border: 1px #5a5e66 solid;
  line-height: 25px;
  white-space: nowrap;
  word-wrap: break-word;
}
.imageHome {
  /* padding: 5px 5px 5px 5px; */
  /* width: 49%; */
  /* height: 104px; */
  /* background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
  overflow: hidden;
  border-radius: 2px; */
  width: 104px;
  height: 104px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 2px;
  .image-size {
    /*background: #2E2E2E;*/
    /* border-radius: 50%; */
    display: flex;
  }
}
</style>
